<template>
	<div class="goods-block">
		<van-cell :title="title" :icon="icon"></van-cell>
		<van-row type="flex" justify="center">
			<van-col span="7" class="goods_item" v-for="(item,i) in productList" :key="i" @click="onDetail(item)">
				<van-image :src="APIDomainName + item.pic"></van-image>
				<div class="van-ellipsis">{{item.title}}</div>
				<div class="price">￥{{item.price}}</div>
			</van-col>
		</van-row>
	</div>
</template>

<script>
	export default {
		name: "homeProduct",
		props: {
			title: {
				type: String,
				default: "商品",
			},
			icon: {
				type: String,
				default: null,
			},
			productList: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			onDetail(item) {
				this.$router.push({ name: 'productDetail', params: { id: item.productId } })
			}
		}
	}
</script>

<style lang="less" scoped>
	.goods-block {
		background-color: #f7f7f7;

		.van-cell {
			font-size: 16px;
			background-color: #DCDEE0;
		}

		.goods_item {
			display: flex;
			flex-direction: column;
			margin: 6px;
			padding: 5px;
			background-color: white;
			border-radius: 10px;
			font-size: 14px;

			.price {
				font-size: 18px;
				color: red;
				font-weight: bold;
				text-align: right;
				padding-right: 10px;
			}
		}
	}
</style>